<template>
  <div>
      <el-dialog :title="obj.title" :visible.sync="obj.isShow" width="70%">
        <el-form :model="form" style="overflow:hidden;" ref="form" :rules="rules">
            <el-form-item label="书名" prop="name" :label-width="formLabelWidth" :style="itemStyle">
                <el-input v-model="form.name" size="small" auto-complete="off" :style="style"></el-input>
            </el-form-item>
            <el-form-item label="isVIP" :label-width="formLabelWidth" :style="itemStyle">
                <el-select v-model="form.isvip" size="small" placeholder="请选择" :style="style">
                    <el-option label="否" :value="0"></el-option>
                    <el-option label="是" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="签约等级" :label-width="formLabelWidth" :style="itemStyle">
                <el-select v-model="form.status" size="small" placeholder="请选择" :style="style">
                    <el-option label="E" value="E"></el-option>
                    <el-option label="D" value="D"></el-option>
                    <el-option label="C" value="C"></el-option>
                    <el-option label="B" value="B"></el-option>
                    <el-option label="A" value="A"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth" :style="itemStyle">
                <el-select v-model="form.cat" size="small" placeholder="请选择" :style="style" @change="catChange">
                    <el-option v-for="(item,index) in cats" :key="index" :label="item.type" :value="item.cgid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="子类型" :label-width="formLabelWidth" :style="itemStyle">
                <el-select v-model="form.subCate" size="small" placeholder="请选择" :style="style" @change="subCateChange">
                    <el-option v-for="(item,index) in subcats" :key="index" :label="item.type" :value="item.scid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="连载状态" :label-width="formLabelWidth" :style="itemStyle">
                <el-select v-model="form.stateType" size="small" placeholder="请选择" :style="style">
                    <el-option label="连载" value="T"></el-option>
                    <el-option label="完结" value="F"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth" :style="itemStyle">
                <el-select v-model="form.bAuth" size="small" placeholder="请选择" :style="style" @change="authorChange">
                    <el-option v-for="(item,index) in authors" :key="index" :label="item.bAuth" :value="item.cid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth" :style="itemStyle">
                <el-date-picker type="datetime" size="small" placeholder="选择日期" v-model="form.date" :style="style"></el-date-picker>
            </el-form-item>
            <el-form-item label="简介" prop="desc" :label-width="formLabelWidth" style="clear:left;margin-bottom:12px;">
                <el-input type="textarea" v-model="form.desc" row="5"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="obj.isShow = false" size="small">取 消</el-button>
            <el-button type="primary" @click="addSuccess('form')" size="small">确 定</el-button>
        </div>
        </el-dialog>
  </div>
</template>
<script>
    import api from '../api'
    export default{
        mounted(){
            this.getCat();
        },
        props:['obj','getBook','alert'],
        methods:{
            getCat(){
                api.$http("/system/getAllBookInfo",{},function(err,res){
                    if(res.data.code==1){
                        this.cats=res.data.info.cats;  
                        this.authors=res.data.info.authors;
                        this.form.bAuth=this.authors[0]['cid'];
                        this.form.authorName=this.authors[0]['bAuth'];
                        this.form.cat=this.cats[0]['cgid'];
                        this.form.catName=this.cats[0]['type'];
                        this.getSubCate();
                    }
                    //console.log(res.data);
                }.bind(this));
            },
            getSubCate(){
                api.$http("/system/getSubCate",{cat:this.form.cat},function(err,res){
                    if(res.data.code==1){
                        this.subcats=res.data.info; 
                        this.form.subCate=this.subcats[0]['scid'];
                        this.form.subCateName=this.subcats[0]['type'];
                    }
                    //console.log(res.data);
                }.bind(this));
            },
            catChange(){
                let obj=this.cats.find((item)=>{
                    return item.cgid == this.form.cat;
                });
                this.form.catName=obj['type'];
                this.getSubCate();
            },
            subCateChange(id){
                let obj=this.subcats.find((item)=>{
                    return item.scid == id;
                });
                this.form.subCateName=obj['type'];
            },
            authorChange(id){
                let obj=this.authors.find((item)=>{
                    return item.cid == id;
                });
                this.form.authorName=obj['bAuth'];
            },
            addSuccess(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        api.$http('/system/setEditBook',this.form,function(err,res){
                            if(res.data.code==1){
                                this.getBook();
                                this.obj.isShow=false;
                                this.form={
                                    bid:"",
                                    name:"",
                                    isvip:0,
                                    status:"E",
                                    cat:0,
                                    catName:"",
                                    subCate:0,
                                    subCateName:"",
                                    stateType:"T",
                                    bAuth:"",
                                    authorName:"",
                                    desc:"",
                                    date:new Date()
                                }
                                return true;
                            }
                        }.bind(this));
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        updated(){
            this.form=this.obj.row;
            api.$http("/system/getSubCate",{cat:this.form.cat},function(err,res){
                if(res.data.code==1){
                    this.subcats=res.data.info; 
                }
                //console.log(res.data);
            }.bind(this));
        },
        data(){
            return {
                form:{
                    bid:"",
                    name:"",
                    isvip:0,
                    status:"E",
                    cat:0,
                    catName:"",
                    subCate:0,
                    subCateName:"",
                    stateType:"T",
                    bAuth:"",
                    authorName:"",
                    desc:"",
                    date:new Date()
                },
                cats:[],
                subcats:[{scid:0,type:"请选择"}],
                authors:[],
                key:0,
                rules:{
                    name: [
                        { required: true, message: '请输入书名', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    desc: [
                        { required: true, message: '请输入简介', trigger: 'blur' },
                        { min: 1, max: 400, message: '长度在 1 到 400 个字符', trigger: 'blur' }
                    ]
                },
                style:{
                    width:"193px",
                    float:"left"
                },
                itemStyle:{
                    float:"left",
                    marginBottom:"10px"
                },
                formLabelWidth:"70px"
            }
        }
    }
</script>
<style>
    .el-dialog__body{
        padding:20px;
    }
    .el-form-item__error{
        padding-top:0;
    }
</style>
